<template>
  <m-page>
    <template #head>
      <m-navbar bg-color="#FFF" :title="title" />
    </template>

    <div class="m-sign">
      <div class="m-sign-success">
        <div class="sign-window">
          这里显示成功的图片
        </div>
        <div class="sign-info">
          <span>已连续签到 <ins>30</ins> 天，明天继续签到可领 <ins>5</ins> 个金币</span>
        </div>
      </div>
      <div class="m-sign-calendar">
        <div class="calen-title">
          <h3>签到日历</h3>
        </div>
        <div class="">
          这里显示日历
        </div>
        <!-- <van-calendar title="xxx" first-day-of-week="1" :poppable="false" :show-confirm="false" :style="{height: '520px'}" /> -->
      </div>
    </div>
  </m-page>
</template>
<script setup>
import { ref } from 'vue'
const title = ref('签到福利')

definePageMeta({
  middleware: 'auth'
})
</script>
<style lang="less" scoped>
.m-sign {
  display: flex;
  flex-direction: column;
  &-success {
    text-align: center;
    .sign-window {
      padding: 28px 0;
      background: #f60;
    }
    .sign-info {
      line-height: 50px;
      background-color: rgb(252, 241, 249);
      ins {
        text-decoration: none;
        color: #ff4400;
      }
    }
  }
  &-calendar {

  }
}
</style>
